import { useEffect } from "react";
import { Form, Input, Button, MessagePlugin } from "tdesign-react";
import { DesktopIcon, LockOnIcon } from "tdesign-icons-react";
import type { FormProps } from "tdesign-react";
import "./index.scss"
import { useNavigate } from "react-router-dom";

const LoginComponent = () => {
  const navigate = useNavigate();
  const onSubmit: FormProps["onSubmit"] = (e) => {
    console.log(e);
    if (e.validateResult === true) {
      MessagePlugin.info("提交成功");
      setTimeout(() => {
        navigate('/dashboard', { replace: true });
      }, 1000);
    }
  };

  const onReset: FormProps["onReset"] = (e) => {
    console.log(e);
    MessagePlugin.info("重置成功");
  };

  return (
    <div className="system-login__container">
      <div className="login-content__box">
        <h3 className="login-content__title">欢迎登录</h3>
        <Form statusIcon={true} onSubmit={onSubmit} onReset={onReset} colon={true} labelWidth={0}>
          <Form.FormItem name="account">
            <Input clearable={true} prefixIcon={<DesktopIcon />} placeholder="请输入账户名" />
          </Form.FormItem>
          <Form.FormItem name="password">
            <Input type="password" prefixIcon={<LockOnIcon />} clearable={true} placeholder="请输入密码" />
          </Form.FormItem>
          <Form.FormItem>
            <Button theme="primary" type="submit" block>
              登录
            </Button>
          </Form.FormItem>
        </Form>
      </div>
    </div>
  );
};

export default LoginComponent;
